<template>
	<el-row class="dbconfig">
		<el-col :span="24">
  			<el-form :inline="true" :model="conditionForm" class="demo-form-inline">
				<el-form-item label="系统选择">
					<el-select v-model="conditionForm.syscode" placeholder="请选择" @change="selectSys" >
						<el-option v-for="item in options" :label="item.sysCode" :value="item.dbid">
						</el-option>
					</el-select>
				</el-form-item>	
				
				<el-form-item label="用户名">
					<el-input v-model="conditionForm.username"  placeholder="用户名" ></el-input>
				</el-form-item>
				
				 <el-form-item label="操作类型">	
					<el-select v-model="conditionForm.operate" placeholder="请选择">
						<el-option label="All" value="全部"></el-option>
	
						<el-option label="Update" value="Update"></el-option>
						<el-option label="Insert" value="Insert"></el-option>
						<el-option label="Delete" value="Delete"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="开始日期" label-width="100">
					<el-date-picker v-model="conditionForm.starttime" align="right" placeholder="选择日期" format="yyyy-MM-dd" @change="dateChange1"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="结束日期" label-width="100">
					<el-date-picker v-model="conditionForm.endtime" align="right" placeholder="选择日期" format="yyyy-MM-dd" @change="dateChange2"></el-date-picker>
				</el-form-item>
				
				<el-form-item label="" label-width="0">
					<el-button type="primary" @click="queryData">查询</el-button>
				</el-form-item>
			</el-form>
			
			<div class="">
				<el-button v-if="df_status==0" type="primary" icon="plus" @click="add">添加触发器</el-button>
				<el-button v-if="df_status==1||df_status==-1" disabled type="primary" icon="plus">添加触发器</el-button>
				<el-button v-if="df_status==0||df_status==-1" disabled type="primary" icon="delete">移除触发器</el-button>
				<el-button v-if="df_status==1" type="primary" icon="delete" @click="drop">移除触发器</el-button>
			</div>
			
			</br>
			<el-table :data="tableData" border style="width: 100%" highlight-current-row>
				<el-table-column prop="userip" label="操作IP" width="150">
				</el-table-column>
				<el-table-column prop="username" label="用户名" width="100">
				</el-table-column>
				<el-table-column prop="relatedtab" label="相关表名" width="100">
				</el-table-column>
				<el-table-column prop="operate" label="操作类型" width="100">
				</el-table-column>
				<el-table-column label="操作前数据" width="200">
					<template scope="scope">
						<div v-html="scope.row.beforevalue"></div>
					</template>
				</el-table-column>
				<el-table-column label="操作后数据" width="200">
					<template scope="scope">
						<div v-html="scope.row.aftervalue"></div>
					</template>
				</el-table-column>
				<el-table-column prop="changetime" label="操作时间" width="200">
				</el-table-column>
			</el-table>	
			<el-pagination
		      @size-change="pageSizeChange"
		      @current-change="handleCurrentChangePage"
		      :current-page="pag.currentPage"
		      :page-sizes="[10,20, 50, 100, 200]"
		      :page-size="pag.pageSize"
		      layout="->,prev, pager, next, jumper, sizes,total"
		      :total="pag.totalSize">
		    </el-pagination>
  		</el-col>
	</el-row>
</template>


<script>
	import {
		Message
	} from 'element-ui';
	import {
		Notification
	} from 'element-ui';
	
	
	export default {
			data() {
				return {
					conditionForm: {
						syscode: '',
						username: '',
						userip: '',
						starttime:'',
						endtime:'',
						operate:''
					},
					tableData: [],
					pageSize: 20,
					totalSize: 0,
					options: [],
					df_status:-1,
					dbid:'',
					starttime:'',
					endtime:'',
					pag:{
						start:0,
						totalSize:0,
						pageSize: 10,
						currentPage:1,
					}
				}
			},
			methods: {
				getPageData(param) {					
					if(!param || param == {}) {
						var param = {}
					}
					
					param.logs = {}
					param.logs.username = this.conditionForm.username
					if (this.conditionForm.operate =='全部'){
						param.logs.operate = ''
					}
					else{
						param.logs.operate = this.conditionForm.operate
					}
					param.logs.starttime = this.starttime
					param.logs.endtime = this.endtime	
					param.dbid = this.dbid
					param.currentPage = this.pag.currentPage
					param.pageSize = this.pag.pageSize
					param.start = this.pag.start
					debugger
					this.$httpExt().post('dbConfig/dfLogsData',
							param
						)
						.then((response) => {
							this.tableData = response.result.rows;
							this.pag.totalSize = response.result.totalSize;
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
				},
				queryData() {
					if(this.dbid ==''){
						Message({
								message: '请先选择数据库!',
								type: 'info'
						});
					}
					else{
						this.getPageData()
					}
					
				},
				handleCurrentChangePage(val){//翻页，当前页数给后台
					this.pag.currentPage = val;
					this.pag.start = (val - 1) * this.pag.pageSize;
					this.getPageData();
				},
				pageSizeChange(val){//一页显示多少条
					this.pag.pageSize = val;
					this.getPageData();
				},
				queryEntityList(){
					
					this.$httpExt().post('dbConfig/queryEntityList')
						.then((response) => {
							var body = response.result
							this.options = body
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
				},
				selectSys(value){
					this.dbid = value				
					for(let [index, item] of this.options.entries()) {
						if(value == item.dbid){
							this.df_status = item.dfStatus					
						}
					}
				},
				add(){
					
					this.$httpExt().postForm('dbConfig/addTriggers', {
								dbid: this.dbid
							}).then((response) => {
								var body = response
								Message({
									message: '添加触发器成功!',
									type: 'success'
								});
								this.df_status = 1
							}, (response) => {
								Notification.error({
									title: '异常',
									message: response.msg
								})
							})
				},
				drop(){
					this.$httpExt().postForm('dbConfig/dropTriggers', {
								dbid: this.dbid,
							}).then((response) => {
								var body = response
								Message({
									message: '移除触发器成功!',
									type: 'success'
								});
								this.df_status = 0
							}, (response) => {
								Notification.error({
									title: '异常',
									message: response.msg
								})
							})
				},
				dateChange1(val) {
					this.starttime = val
				},
				dateChange2(val) {
					this.endtime = val
				}
			},
			mounted() {
				this.queryEntityList()				
			}
	}



</script>
